<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>kitty.cheng 抽奖系统</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
            font-family: 微软雅黑;
        }
        body{
            width: 100%;
            height: 100%;
            background: url(/Public/cj/img/bg1.jpg) no-repeat top center;
            background-attachment:fixed;
            background-size: cover;
            -webkit-background-size: cover; /*兼容Webkit内核浏览器如Chrome和Safari */
            -o-background-size: cover;/* 兼容Opera  */
            zoom: 1;
        }
        .title {
            font-size:60px;
            font-family: 微软雅黑;
            color:yellow;
            text-align:center;
            padding: 60px 0 30px 0;
        }
        .title span{
            color: yellow;
            font-size: 46px;
        }
        #jiangming {
            text-align: center;
            color: yellow;
            font-size: 36px;
            padding: 0 0 20px 0;
        }
        #zhongjiangList{
            width: 1000px;
            margin: 0 auto;
            font-size: 45px;
            color: yellow;
            background: red;
            text-align: center;
            padding: 20px 0 20px 45px;
            border-radius: 35px;
        }
        #zhongjiangList li{
            width: 180px;
            height: 68px;
            line-height: 68px;
            text-align: left;
            display: inline-block;

        }
        #is_show{
            text-decoration: underline;
            cursor: pointer;
        }
        #show{
            display: none;
        }
        #con {
            position: fixed;
            right: 10px;
            bottom: 10px;
            border: 1px solid #ccc;
        }
        #start,#stop {

        }
        .col {

        }
        .aw_add {
            width: 100px;
        }
    </style>

</head>
<body>
<h1 class="title">山东朱氏药业集团有限公司<br><span>2020年年底晚会</span></h1>


<!-- 奖项名称 -->
<div id="jiangming">

</div>

<!-- 中奖名单 -->
<div id="zhongjiang">

</div>

<div id="con">
    <form action="" method="post">
        <input type="radio" name="type" value="1" id="type1" checked="checked"><label for="type1">one</label>&nbsp;&nbsp;
        <a href="/Login/logOut.html"> 退出系统 </a>
        <br>
        <select name="awards_id" id="awards_id">
            <option value="" selected="selected">请选择</option>
            <volist name="awards" id="item">
            <option value="{$item.id}" jiangNum="{$item.number_of_winners}">{$item.name}</option>
            </volist>
        </select>
        <span id="is_show">显示</span>
        <div id="show">
            奖项：<input type="text" name="aw_name" class="aw_add" placeholder="奖项名称" /> <br>
            数量：<input type="text" name="aw_num" class="aw_add" placeholder="一次抽取的人数" /> <br>
            次数：<input type="text" name="aw_time" class="aw_add" placeholder="抽取的次数" /> <br>
            奖品：<input type="text" name="aw_info" class="aw_add" placeholder="奖品描述" /> <br>
            赞助：<input type="text" name="hp_name" class="aw_add" placeholder="由谁赞助" /><br>
            <input type="button" id="addAw" value="增加奖项" />
        </div>

    </form>

    <a href="javascript:void(0);" id="start" class="col">开始</a>&nbsp;&nbsp;
    <a href="javascript:void(0);" id="stop" class="col">停止</a>&nbsp;
    <a href="/index.php/Home/Awards/getList.html" title="点击查看中奖名单" class="col"><span id="shengYuNum">{$shengYuNum}</span></a>
</div>



<script src="/Public/cj/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

    var dataArray = new Array();
    // var jiangNum = 20;
    $("#start").click(function(event) {

        if(typeof(timer) == "string" || typeof(timer) == "undefined") {

            var awards_id = $("#awards_id option:checked").val();
            if(awards_id == 0) {
                alert("请选择需要抽取的奖项");
                return false;
            }
            $("form").hide();
            var jiangming = $("#awards_id option:checked").text();
            var jiangNum = $("#awards_id option:checked").attr('jiangNum');
            var type = $("input[name='type']:checked").val();
            // alert(type);
            $("#jiangming").html(jiangming+" 正在抽取中……");

            $.ajax({
                url: '/index.php/Home/Awards/getUser.html',
                type: 'POST',
                dataType: 'json',
                data: {'type':type},
                beforeSend: function() {
                    $("#zhongjiang").html(
                        '<p style="color:#999;font-size:36px;text-align:center;">加载中……</p>'
                    );
                },
                success: function(data) {
                    dataArray = data;
                    // alert('总人数：' + dataArray.length);
                    // alert('需抽取的人数：' + jiangNum);
                    if(dataArray.length > jiangNum){
                        start(dataArray,jiangNum);
                    }else{
                        $("#zhongjiang").html(
                            '<p style="color:#999;font-size:36px;text-align:center;">人数不够</p>'
                        );
                        alert('人数不够');
                    }

                }
            });
        }else{
            return false;
        }
    });



    $("#stop").click(function(event) {

        if(typeof(timer) == "number") {
            var str_jiangming = $("#jiangming").html();
            $("#jiangming").html(str_jiangming.replace('正在抽取中……','中奖名单'));

            stop();
            timer = "";

            var type = $("input[name='type']:checked").val();//是否进行第二次抽奖
            var awards_id = $("#awards_id option:selected").val();
            // ;
            var zhongjiangUid = $('#zhongjiangList li');
            var uids='';
            for (var i = 0; i < zhongjiangUid.length; i++) {
                uids += zhongjiangUid.eq(i).attr('uid')+',';
            };
            uids = uids.substr(0,uids.length-1);

            $.ajax({
                url: '/index.php/Home/Awards/updateUser.html',
                type: 'POST',
                dataType: 'json',
                data: {'uids': uids,'awards_id':awards_id,'type':type},
                success: function(data) {
                    var str_select = '<option value="" selected="selected">请选择</option>';
                    for (var i = 0; i < data.length; i++) {
                        str_select += '<option value="'+ data[i].id+'" jiangNum="'+data[i].number_of_winners+'">'+data[i].name+'</option>';
                    }
                    $("#awards_id").html(str_select);
                    // 更新剩余人数,
                    $.ajax({
                        url: '/index.php/Home/Awards/getUserRemainCount.html',
                        type: 'POST',
                        dataType: 'json',
                        success:function(count){
                            $("#shengYuNum").html(count);
                        }
                    });
                }
            });
        }
        $("form").show();
    });

    //增加奖项
    $("#addAw").click(function(event) {
        var aw_name = $(":text[name='aw_name']").val();
        var aw_num = $(":text[name='aw_num']").val();
        var aw_time = $(":text[name='aw_time']").val();
        var aw_info = $(":text[name='aw_info']").val();
        var hp_name = $(":text[name='hp_name']").val();

        if(!aw_name) {
            alert('奖项不能为空');
            return false;
        }
        if(!aw_num) {
            alert('奖项数量不能为空');
            return false;
        }
        var rep = /^\+?[1-9][0-9]*$/;

        if(!rep.test(aw_num)) {
            alert('奖项数量必须为数字');
            return false;
        }
        if(!aw_info) {
            alert('奖品名称不能为空');
            return false;
        }

        $.ajax({
            url: '/index.php/Home/Awards/addAward.html',
            type: 'POST',
            dataType: 'json',
            data: {'aw_name': aw_name,'aw_num': aw_num,'aw_time': aw_time,
                'aw_info': aw_info,'hp_name': hp_name},
            success: function(data) {
                if(data == 2) {
                    alert('奖项名称已存在，请重新填写');
                }else if(data == 0) {
                    alert('您的数据没有被添加');
                }else{
                    $("input.aw_add").val('');//清空输入框

                    alert('增加奖项【'+aw_name+'】成功');
                    var str_select = '<option value="" selected="selected">请选择</option>';
                    for (var i = 0; i < data.length; i++) {
                        str_select += '<option value="'+ data[i].id+'" jiangNum="'+data[i].number_of_winners+'">'+data[i].name+'</option>';
                    }
                    $("#awards_id").html(str_select);
                }
            }
        });

    });


    function start(dataAll,jiangNum) {
        timer = setInterval(function(){
            zhongjiangList(dataAll,jiangNum);
        },5);
    }
    function stop() {
        clearInterval(timer);
    }

    function zhongjiangList(dataAll,zhongjiangNum) {
        var tableHtml="<ul id='zhongjiangList'>";
        map = new Array();
        for (var i = 0; i <zhongjiangNum; i++) {
            var r = getRound(0,dataAll.length-1,map);

            tableHtml += "<li uid='"+dataAll[r]['id']+"'>"+dataAll[r]['truename']+"</li>";
        }
        tableHtml += "</ul>";

        $('#zhongjiang').html(tableHtml);

    }

    function getRound(min,max,map){
        var indexNum=parseInt(Math.random()*(max-min+1));
        if($.inArray(indexNum, map) == -1){
            map.push(indexNum);
            return indexNum;
        }else{
            return getRound(min,max,map);
        }
    }

    $("#is_show").click(function(event) {
        var str = $(this).html();
        if(str == "显示") {
            $(this).html("隐藏");
            $("#show").show();
        }else {
            $(this).html("显示");
            $("#show").hide();
        }
    });

</script>
</body>
</html>